<template>
  <div class="todo">
    <h2>待办事项</h2>

    <!-- 新增 -->
    <div class="todo-input">
      <input
        type="text"
        placeholder="请输入待办事项"
        v-model="text"
        @keydown.enter="addTask"
      />
    </div>

    <!-- 状态 -->
    <div class="todo-state">
      所有任务： {{ getCount.t }} 已完成：{{ getCount.d }} 未完成：{{
        getCount.n
      }}
    </div>

    <!-- 状态切换 -->
    <div class="todo-tab">
      <label>
        所有任务
        <input type="radio" v-model="state" value="1" />
      </label>
      <label>
        已完成任务
        <input type="radio" v-model="state" value="2" />
      </label>
      <label>
        未完成任务
        <input type="radio" v-model="state" value="3" />
      </label>
    </div>

    <!-- 待办列表 -->
    <ul class="todo-list">
      <li class="todo-item clear" v-for="item in getList" :key="item.id">
        <span
          class="todo-item-state"
          :class="{ done: item.state }"
          @click="item.state = !item.state"
        ></span>
        <input
          v-if="item.id == curId"
          type="text"
          class="todo-item-edit"
          v-model="item.text"
          @keydown.enter="editDone"
          @keydown.esc="editCancel(item)"
          @blur="editDone"
          @focus="editBefore(item.text)"
          v-focus
        />
        <p v-else class="todo-item-show" @dblclick="curId = item.id">
          {{ item.text }}
        </p>
        <a href="" class="todo-item-del" @click.prevent="delTodo(item.id)">X</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "ToDo",
  data() {
    return {
      text: "",
      state: "1",
      todoList: [],
      curId: "", // 记录当前编辑对象 id
      beforeText: "", // 用于记录编辑之前的内容
    };
  },
  computed: {
    getCount() {
      let t = this.todoList.length;
      let d = this.todoList.filter((item) => item.state).length;
      let n = t - d;
      return { t, d, n };
    },
    getList() {
      let a;
      if (this.state === "1") {
        a = this.todoList;
      } else if (this.state === "2") {
        a = this.todoList.filter((item) => item.state);
      } else if (this.state === "3") {
        a = this.todoList.filter((item) => !item.state);
      }

      return a;
    },
  },
  directives: {
    // 自定义指令 - 使用时以 v- 开头
    focus: {
      // 指令所在标签插入节点后，自动运行
      inserted: function (el) {
        // el 表示指令所在的标签
        el.focus();
      },
    },
  },
  methods: {
    addTask() {
      this.todoList.push({
        id: Date.now(),
        text: this.text,
        state: false,
      });

      this.text = "";
    },
    editDone() {
      this.curId = "";
    },
    editCancel(item) {
      this.curId = "";
      item.text = this.beforeText;
      this.beforeText = "";
    },
    editBefore(txt) {
      this.beforeText = txt;
    },
    delTodo(id) {
      this.todoList = this.todoList.filter((item) => item.id != id);
    },
  },
};
</script>

<style lang="scss">
.todo {
  width: 600px;
  margin: 50px auto 0;

  h2 {
    text-align: center;
    padding: 10px;
  }

  .todo-input {
    padding: 10px;

    input {
      width: 100%;
      height: 40px;
      box-sizing: border-box;
      border: 1px solid #333;
      outline: none;
      padding: 0 10px;
    }
  }

  .todo-tab {
    label {
      margin-right: 10px;
    }
  }
  .todo-tab,
  .todo-state,
  .todo-list {
    padding: 10px;
  }

  .todo-item {
    margin-bottom: 10px;
    line-height: 30px;

    .todo-item-state {
      float: left;
      width: 12px;
      height: 12px;
      background: #999;
      margin-right: 10px;
      margin-top: 9px;
    }
    .done {
      background: #159edd;
    }
    .todo-item-show {
      float: left;
      height: 30px;
    }
    .todo-item-edit {
      height: 30px;
      float: left;
      outline: none;
      padding: 0 5px;
      box-sizing: border-box;
    }

    .todo-item-del {
      float: right;
      line-height: 30px;
      color: #f14b21;
      display: none;
    }
    &:hover .todo-item-del {
      display: inline;
    }
  }
}
</style>